<script setup lang="ts">
import { ref } from 'vue';

import { reqPlatformList } from '#/api/exchange-center';

interface IPlatform {
  id: number;
  name: string;
}
const platformList = ref<IPlatform[]>([]);
const getPlatforms = async () => {
  const data = await reqPlatformList();
  platformList.value = data.list;
  // console.log('data', data);
};
getPlatforms();
// const platformList = [
//   { name: 'binanceSwap' },
//   { name: 'BybitLiner' },
//   { name: 'OkxSwap' },
//   { name: 'binanceSwap' },
//   { name: 'binanceSpot' },
//   { name: 'binanceFutures' },
//   { name: 'binanceSwap' },
//   { name: 'binanceSpot' },
//   { name: 'binanceFutures' },
//   { name: 'binanceSwap' },
//   { name: 'binanceSpot' },
//   { name: 'binanceFutures' },
// ];
</script>

<template>
  <el-card class="platform-card w-2/5">
    <div class="card-header p-5">平台支持</div>

    <div class="flex flex-wrap p-0">
      <template v-for="item in platformList" :key="item.id">
        <div
          class="flex-col-center border-border group w-1/3 cursor-pointer border py-8 hover:shadow-xl"
        >
          <span class="text-md mt-2 truncate">{{ item.name }}</span>
        </div>
      </template>
    </div>
  </el-card>
</template>

<style lang="scss">
.platform-card {
  .el-card__body {
    padding: 3px !important;
  }
}
</style>
